<!-- 配置车辆弹窗 -->
<template>
  <div>
    <el-dialog
      title="配置车辆"
      :visible="isDialog"
      @close="ClosePopup"
      @open="getList"
    >
      <!-- 司机信息 -->
      <div class="information">
        <div>
          <span style="margin-left:50px">司机编号: {{ rowList.userId }}</span>
          <span style="margin-left:100px">司机名称: {{ rowList.name }}</span>
        </div>
        <div style="margin-top:20px">
          <span style="margin-left:50px">司机电话: {{ rowList.mobile }}</span>
          <span style="margin-left:160px">所属机构: {{ rowList.agency?rowList.agency.name:'' }}</span>
        </div>
      </div>

      <!-- 下拉框 -->
      <el-form
        label-width="90px"
        style="margin-top:25px;width:400px"
      >
        <el-form-item label="配置车辆:">
          <el-select
            v-model="elselect"
            suffix-icon="el-icon-search"
            placeholder="请选择活动区域"
            filterable
            reserve-keyword
            @change="handleChange"
          >
            <el-option
              v-for="e in list"
              :key="e.id"
              :label="e.licensePlate"
              :value="{id:e.id,value:e.licensePlate,type:e.workStatus}"
            ></el-option>
          </el-select>

        </el-form-item>
      </el-form>

      <div style="margin:0 20px">
        <!-- 表单 -->
        <el-table
          :data="arr"
          style="width:100%"
        >
          <div
            v-show="(arr || arr.length <= 0) && !listLoading"
            slot="empty"
          >
            <img
              src="@/icons/pic-kong@2x.png"
              alt="img"
              style="margin-top: 20px;width: 25%;height: 25%;"
            >
            <p
              style="
                      margin-top: -20px;
                      padding-bottom: 0px;
                      "
            >这里空空如也</p>
          </div>
          <el-table-column
            fixed
            prop="carNumber"
            label="车牌号"
            width="260px"
          ></el-table-column>
          <el-table-column
            fixed
            prop="carType"
            label="车辆状态"
            width="326px"
          >
            <template #default="{row}">
              <span
                :class="{
                  redRest: row.carType === 0,
                  redsWork: row.carType === 1
                }"
              ></span>
              {{ row.carType===1? '启用': '禁用' }}
            </template>

          </el-table-column>
          <el-table-column
            fixed
            label="操作"
            width="100px"
          >
            <template>
              <el-button
                type="text"
                size="small"
                @click="lookData"
              >查看</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button
                type="text"
                size="small"
                @click="delData"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 按钮 -->
      <span
        class="dialogButton"
      >
        <el-button
          type="warning"
          @click="btn"
        >确 定</el-button>
        <el-button
          style="width:100px"
          @click="ClosePopup"
        >取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTruckListInDriver, driverArrangeCar } from '@/api/transit'
import { Message } from 'element-ui'
export default {
  name: 'CarConfig',
  props: {
    // 打开关闭弹窗
    isDialog: {
      type: Boolean,
      default: false
    },
    rowList: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      id: '',
      elselect: '',
      list: [],
      // 回显数组
      arr: [],
      listLoading: false
    }
  },
  methods: {
    async btn() {
      const res = await driverArrangeCar({ driverIds: [this.rowList.userId], truecId: this.elselect })
      if (res.code === 200) {
        Message.error('配置成功')
      } else {
        Message.error(res.msg)
      }
    },
    delData() {
      this.arr = []
      this.elselect = ''
    },
    lookData() {
      this.$router.push({
        path: '/transit/vehicle-detail',
        query: {
          id: this.rowList.truck.id,
          formUrlName: '车辆管理'
        }
      })
    },
    /**
     * 下拉框改变
     */
    handleChange({ id, value, workStatus }) {
      this.listLoading = true
      if (workStatus === undefined) {
        this.arr.splice(0, 1, { carNumber: value, carType: 0 })
      } else {
        this.arr.splice(0, 1, { carNumber: value, carType: workStatus })
      }
      this.listLoading = false
    },
    /**
     * 弹窗开启
     */
    async getList() {
      this.listLoading = true
      const { data } = await getTruckListInDriver()
      this.list = data
      this.elselect = this.rowList.truck ? this.rowList.truck.licensePlate : ''
      if (!this.rowList.truck) {
        return
      } else {
        this.arr.push({ carNumber: this.rowList.truck ? this.rowList.truck.licensePlate : '', carType: this.rowList.truck ? this.rowList.truck.workStatus : '' })
      }
      this.listLoading = false
    },
    /**
     * 关闭弹窗
     */
    ClosePopup() {
      this.$emit('update:isDialog', false)
      this.arr = []
    }
  }
}
</script>

<style lang="scss" scoped>
.serchBox {
  width: 584px;
  margin: 0 auto;
  margin-top: 19px;
  .el-select {
    width: 238px;
  }
  margin-bottom: 20px;
}
.workTime {
  white-space: nowrap;
}
.header {
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  width: 584px;
  height: 90px;
  background-color: #fbfafa;
  flex-wrap: wrap;
  padding: 21px 52px;
  margin: 0 auto;
  // 使得整体内容距离上部分的距离为20px
  margin-top: -10px;
  .el-input {
    width: 240px;
  }
  div {
    flex: 40%;
     // 使包裹的所有div的上下间距为14px
    // margin-bottom: 14px;
  }
  .num,
  .iphone{
    flex: 60%;
  }
  .num,.name{
    margin-bottom: 14px;
  }
  label {
    width: 71px;
    height: 20px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #20232A;
    letter-spacing: 0.16px;
    text-align: right;
  }
  span {
    color: #818693;
    font-size: 14px;
  }
}
.pagination {
  margin: 32px 0 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  color: #20232a !important;
}
.selected-driver {
  margin-top: 18px;
}
.information{
  width: 95%;
  margin-left: 2.5%;
  background-color: #fbfafa;
  padding: 20px;
}
.dialogButton{
  display: block;
  display: flex;
  justify-content: center;
  margin: 40px 20px 10px 20px;
}
// 状态处的点
.redRest {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 10px;
  margin-right: 5px;
  background-color: red;
}
.redsWork {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 10px;
  margin-right: 5px;
  background-color: #1dc779;
}
</style>
